<template>
    <!-- 支付界面 lzy 2022-8-12 08点40分 -->
    <div id="ScenicPay">
        <h1>支付界面</h1>
        <div>
            <canvas id="QRCode_header"></canvas>
        </div>
        <p>订单编号：{{id}}</p>
    </div>
</template>

<script>
export default {
    name: 'ScenicPay',
    data () {
        return {
            // 订单编号
            code: '',
            // 二维码路径
            query: '',
            QRCodeMsg: ''
        }
    },
    mounted () {
        this.code = this.$route.query.code
        this.query = this.$route.query.query
    },
    methods: {
         // 生成二维码
        prcode () {
            let opts = {
                // 容错级别
                errorCorrectionLevel: "H",
                // 生成的二维码类型
                type: "image/png",
                // 二维码质量
                quality: 0.3,
                // 二维码留白边距
                margin: 12,
                // 宽
                width: 200,
                // 高
                height: 180,
                color: {
                    // 前景色
                    dark: "#333333",
                    // 背景色
                    light: "#fff"
                }
            }
            // 生成的二维码为URL地址js
            this.QRCodeMsg = this.query
            let msg = document.getElementById("QRCode_header");
            // 将获取到的数据（val）画到msg（canvas）上
            this.$QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
            })
        },
    }
}
</script>

<style>

</style>